import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { async_getwatch } from '../store/crmsSlice'
import Navbars from '../component/Navbars'
import FangWen from '../component/FangWen'
import { Search, Tabs } from 'react-vant';
import { useNavigate,Outlet } from 'react-router-dom'

export default function Home() {

  //获取数据
  let dispatch = useDispatch()
  useEffect(() => {
    dispatch(async_getwatch())
  }, [])
  let obj = useSelector(state => state.crms1)
  //console.log(obj);

  /* 搜索栏 */
  const [value, setValue] = useState('');

  /* 标签栏数据 */
  const tabslist = [
    { title: '全部', path: '/home/' },
    { title: '专栏', path: '/home/zhuanlan' },
    { title: '直播', path: '/home/zhibo' },
    { title: '课程', path: '/home/kecheng' },
  ]
  //跳转
  let navigate = useNavigate()

  return (
    <div>
      {/* 顶部标签栏 */}
      <Navbars title={'小黄鸭'} isBack={false}></Navbars>

      {/* 搜索栏 */}
      <div>
        <Search value={value} onChange={setValue} clearable placeholder="请输入课程/店铺名称" />
      </div>

      {/* 最进访问 */}
      <FangWen></FangWen>

      {/* 中间标签栏切换 */}
      <div style={{ marginTop: '30px' }}>
        <Tabs onChange={(e:any)=>{
          navigate(e)
        }}>
          {tabslist.map((item,index) => (
            <Tabs.TabPane key={index} title={item.title} name={item.path}>
            </Tabs.TabPane>
          ))}
        </Tabs>
      </div>

      {/* 二级视口 */}
      <div>
        <Outlet/>
      </div>

    </div>
  )
}
